<template>
  <!-- 容器 -->
  <div class="container">
    <n-tabs type="line" animated>
      <n-tab-pane v-for="item in tabPaneOptions" :key="item.name" :name="item.name" :tab="item.tab">
        <component :is="item.component" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script lang="ts" setup>
import LengthConvert from "./components/LengthConvert.vue";
import WeightConvert from "./components/WeightConvert.vue";
import AreaConvert from "./components/AreaConvert.vue";
import VolumeConvert from "./components/VolumeConvert.vue";
import EnergyConvert from "./components/EnergyConvert.vue";
import SpeedConvert from "./components/SpeedConvert.vue";
import DensityConvert from "./components/DensityConvert.vue";
import ForceConvert from "./components/ForceConvert.vue";
import PressureConvert from "./components/PressureConvert.vue";
import PowerConvert from "./components/PowerConvert.vue";
import TemperatureConvert from "./components/TemperatureConvert.vue";
import TimeConvert from "./components/TimeConvert.vue";
import StorageConvert from "./components/StorageConvert.vue";
import AngleConvert from "./components/AngleConvert.vue";
import RmbConvert from "./components/RmbConvert.vue";
import LightConvert from "./components/LightConvert.vue";
import TorqueConvert from "./components/TorqueConvert.vue";
import ResistanceConvert from "./components/ResistanceConvert.vue";
import VoltageConvert from "./components/VoltageConvert.vue";
import CurrentConvert from "./components/CurrentConvert.vue";
import { useConfigStore } from "@renderer/store/config";

const tabPaneOptions = [
  {
    name: "length",
    tab: "长度",
    component: LengthConvert,
  },
  {
    name: "weight",
    tab: "质量",
    component: WeightConvert,
  },
  {
    name: "area",
    tab: "面积",
    component: AreaConvert,
  },
  {
    name: "volume",
    tab: "体积",
    component: VolumeConvert,
  },
  {
    name: "energy",
    tab: "能量",
    component: EnergyConvert,
  },
  {
    name: "speed",
    tab: "速度",
    component: SpeedConvert,
  },
  {
    name: "density",
    tab: "密度",
    component: DensityConvert,
  },
  {
    name: "force",
    tab: "力",
    component: ForceConvert,
  },
  {
    name: "pressure",
    tab: "压强",
    component: PressureConvert,
  },
  {
    name: "power",
    tab: "功率",
    component: PowerConvert,
  },
  {
    name: "temperature",
    tab: "温度",
    component: TemperatureConvert,
  },
  {
    name: "time",
    tab: "时间",
    component: TimeConvert,
  },
  {
    name: "storage",
    tab: "存储",
    component: StorageConvert,
  },
  {
    name: "angle",
    tab: "角度",
    component: AngleConvert,
  },
  {
    name: "rmb",
    tab: "人民币",
    component: RmbConvert,
  },
  {
    name: "light",
    tab: "光照度",
    component: LightConvert,
  },
  {
    name: "torque",
    tab: "力矩",
    component: TorqueConvert,
  },
  {
    name: "resistance",
    tab: "电阻",
    component: ResistanceConvert,
  },
  {
    name: "voltage",
    tab: "电压",
    component: VoltageConvert,
  },
  {
    name: "current",
    tab: "电流",
    component: CurrentConvert,
  },
];

// 全局配置
const useConfig = useConfigStore();
// 表格宽度
const containerWidth = computed(() => {
  return useConfig.collapsed ? "72px" : "224px";
});
</script>

<style lang="scss" scoped>
#container {
  width: calc(100vw - v-bind(containerWidth));
}
</style>
